<template>
	<div class="loginview">
		<div class="panel login-panel">
			<div class="panel-header">
				<h1 class="panel-title">后台登录</h1>
			</div>
			<div class="panel-body">
				<el-form :model="params" :rules="rules" ref="loginForm">
					<el-form-item prop="staffid">
						<el-input v-model="params.staffid" placeholder="工号"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" v-model="params.password" placeholder="密码"></el-input>
					</el-form-item>
					<el-form-item class="login-button">
						<el-button type="primary" plain class="pull-right" style="width: 100%" @click="submit('loginForm')" :loading="loading">登录</el-button>
					</el-form-item>
					<div class="tips">
						<p>如果您忘记了密码，请点击这里</p>
					</div>
				</el-form>
			</div>
		</div>
		<el-row type="flex" align="bottom" class="footer-row">
			<el-col :span="24">
				<footer class="copyright page-copyright-inverse text-center">
					<div class="social">
						<a class="btn btn-icon btn-pure" href="javascript:void(0)">
							<i class="icon bd-twitter" aria-hidden="true"></i>
						</a>
						<a class="btn btn-icon btn-pure" href="javascript:void(0)">
							<i class="icon bd-facebook" aria-hidden="true"></i>
						</a>
						<a class="btn btn-icon btn-pure" href="javascript:void(0)">
							<i class="icon bd-google-plus" aria-hidden="true"></i>
						</a>
					</div>
				</footer>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import router from '../router'
	import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
	import RouterGenerator from '../utils/RouterGenerator'

	export default {
		data () {
			return {
				loading: false,
				params: {
					staffid: 'TR9521',
					password: 'Kevin@1994'
				},
				rules: {
					staffid: [
						{ required: true, message: '请输入工号', trigger: 'blur' },
						{ min: 6, max: 25, message: '长度在 6 到 25 个字符之间', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 6, max: 25, message: '长度在 6 到 25 个字符之间', trigger: 'blur' }
					]
				}
			}
		},
		methods: {
			...mapMutations([
				'SET_LOGIN_FAILURE'
			]),
			...mapActions([
				'login',
				'fetchProfile'
			]),
			submit (name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.loading = true;
						this.login(this.params);
					} else {
						return false;
					}
				})
			},
			registerRouter () {
				let routers = [];
				//调用路由生成器
				RouterGenerator(routers, this.menus);
				//添加路由到/admin 路由的children
				router.options.routes[0].children = routers;
				//注册路由
				router.addRoutes(router.options.routes);
			}
		},
		watch: {
			/**
			 * 当access_token的state发生变化时
			 * 说明用户登录信息验证成功，并且拿到了access_token
			 * 此时调用fetchProfile 这个action 获取用户信息
			 */
			access_token () {
				this.fetchProfile();
			},
			/**
			 * 监测用户信息状态
			 * 当用户信息
			 */
			user () {
				this.loading = false;
				this.registerRouter();
				this.$router.replace({
					path: '/admin/dashboard'
				})
			},
			/**
			 * 监测登录异常状态，如果存在异常，则提示用户
			 * @param value
			 */
			loginFailure (value) {
				if (value) {
					this.$message.error(value);
					this.loading = false;
				}
				this.SET_LOGIN_FAILURE();
			}
		},
		computed: {
			...mapState ({
				access_token: state => state.account.access_token,
				user: state => state.account.user,
				loginFailure: state => state.account.loginFailure
			}),
			...mapGetters ([
				'menus'
			])
		}
	}
</script>

<style lang="scss">
	html, body {
		color: #76838f;
		margin: 0;
		#app {
			height: 100%;
		}
	}
	.loginview {
		background: #62a8ea;
		background-image: url();
		background-image: -webkit-linear-gradient(top, #62a8ea 0, #3583ca 100%);
		background-image: -o-linear-gradient(top, #62a8ea 0, #3583ca 100%);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#62a8ea), to(#3583ca));
		background-image: linear-gradient(to bottom, #62a8ea 0, #3583ca 100%);
		background-repeat: repeat-x;
		height: 100%;
		.panel-title {
			margin: 0 0 40px 0;
		}
		.footer-row {
			height: 100%;
			z-index: 0;
		}
		.copyright {
			font-size: 12px;
			color: #e4e7ed;
		}
	}
	.login-panel {
		background-color: #FFF;
		padding: 40px;
		/*height: 400px;*/
		border-radius: 4px;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
		width: 400px;
		display: inline-block;
		max-width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -200px;
		transform: translateY(-50%);
		z-index: 10;
		.panel-header {
			text-align: center;
			.panel-title {
				color: #76838f;
			}
		}
		.panel-body {
			text-align: center;
			padding: 10px;
			.tips {
				font-size: 12px;
			}
		}
		.login-button {
			padding-top: 10px;
		}
	}
</style>
